<template>
	<!-- 资产选择模态框 -->
	<a-modal
		v-model:open="assetModalVisible"
		title="选择资产"
		width="1000px"
		@ok="confirmAssetSelection"
		@cancel="cancelAssetSelection"
		:ok-text="'确定(' + selectedRows.length + ')'"
	>
		<!-- 查询条件 -->
		<a-form ref="searchFormRef" :model="searchFormState">
			<a-row :gutter="24">
				<a-col :span="8">
					<a-form-item label="资产分类" name="assetCategory">
						<a-select
							v-model:value="searchFormState.assetCategory"
							placeholder="请选择资产分类"
							:options="assetsCategoryOptions"
							allowClear
							:dropdownMatchSelectWidth="false"
						/>
					</a-form-item>
				</a-col>
				<a-col :span="8">
					<a-form-item label="资产名称" name="assetName">
						<a-input v-model:value="searchFormState.assetName" placeholder="请输入资产名称" />
					</a-form-item>
				</a-col>
				<a-col :span="8">
					<a-form-item label="资产编码" name="assetCode">
						<a-input v-model:value="searchFormState.assetCode" placeholder="请输入资产编码" />
					</a-form-item>
				</a-col>
			</a-row>
			<a-row>
				<a-col>
					<a-form-item>
						<a-space>
							<a-button type="primary" @click="tableRef.refresh(true)">查询</a-button>
							<a-button @click="handleReset">重置</a-button>
						</a-space>
					</a-form-item>
				</a-col>
			</a-row>
		</a-form>

		<!-- 资产表格 -->
		<s-table
			ref="tableRef"
			:columns="assetColumns"
			:data="loadAssetData"
			:row-key="(record) => record.id"
			:row-selection="rowSelection"
		>
			<template #bodyCell="{ column, record }">
				<template v-if="column.dataIndex === 'image'">
					<a-image :src="jdOssBaseUrl + record.image" :width="50" :height="50" :preview="false" />
				</template>
			</template>
		</s-table>

		<!-- 已选择的资产 -->
		<div class="selected-assets-summary" v-if="selectedRows.length > 0">
			<h4>已选择的资产 ({{ selectedRows.length }} 项):</h4>
			<div class="selected-assets-list">
				<a-tag v-for="asset in selectedRows" :key="asset.id" closable @close="removeSelectedAsset(asset)">
					{{ asset.assetName }} - {{ asset.assetCategoryName }}
				</a-tag>
			</div>
		</div>
	</a-modal>
</template>

<script setup>
	import { ref, watch } from 'vue'
	import assetsAdminApi from '@/api/hrms/assets/admin/assetsAdminApi'
	import tool from '@/utils/tool'

	// 定义组件属性
	const props = defineProps({
		visible: {
			type: Boolean,
			default: false
		},
		selectedAssets: {
			type: Array,
			default: () => []
		}
	})

	// 定义事件
	const emit = defineEmits(['update:visible', 'confirm', 'cancel'])
	const searchFormRef = ref()
	// 资产表格引用
	const tableRef = ref()

	// 资产模态框可见性
	const assetModalVisible = ref(false)
	const assetsCategoryOptions = tool.dictList('ASSETS_CATEGORY')
	const jdOssBaseUrl = 'https://s3.cn-north-1.jdcloud-oss.com/'

	// 资产查询表单
	const searchFormState = ref({
		assetStatus: 0,
		assetCategory: undefined,
		assetName: undefined,
		assetCode: undefined
	})

	// 已选择的行数据
	const selectedRows = ref([])
	// 资产表格列定义
	const assetColumns = [
		{ title: '资产图片', dataIndex: 'image', width: 80 },
		{ title: '资产分类', dataIndex: 'assetCategoryName' },
		{ title: '资产名称', dataIndex: 'assetName' },
		{ title: '资产编号', dataIndex: 'assetCode' },
		{ title: '规格型号', dataIndex: 'specification' },
		{ title: '序列号', dataIndex: 'serialNumber' }
	]

	// 行选择配置
	const rowSelection = ref({
		onChange: (selectedRowKeysData, selectedRowsData) => {
			// 更新选中行数据
			selectedRows.value = selectedRowsData
		}
	})

	// 监听props.visible变化
	watch(
		() => props.visible,
		(newVal) => {
			assetModalVisible.value = newVal
			if (newVal) {
				// 模态框打开时初始化已选择的资产
				selectedRows.value = [...props.selectedAssets]
			}
		},
		{ immediate: true }
	)

	// 加载资产数据
	const loadAssetData = (params) => {
		const searchParams = {
			...searchFormState.value,
			...params
		}
		return assetsAdminApi.pageList(searchParams).then((res) => {
			return res
		})
	}

	// 重置查询条件
	const handleReset = () => {
		searchFormRef.value?.resetFields()
		tableRef.value.refresh(true)
	}

	// 移除选中的资产
	const removeSelectedAsset = (assetToRemove) => {
		selectedRows.value = selectedRows.value.filter((asset) => asset.id !== assetToRemove.id)
		// 更新表格选中状态
		tableRef.value?.unselectRowByKey(assetToRemove.id)
	}

	// 确认资产选择
	const confirmAssetSelection = () => {
		emit('confirm', [...selectedRows.value])
		assetModalVisible.value = false
	}

	// 取消资产选择
	const cancelAssetSelection = () => {
		emit('cancel')
		assetModalVisible.value = false
	}

	// 暴露方法给父组件
	defineExpose({
		refresh: () => {
			if (tableRef.value) {
				tableRef.value.refresh(true)
			}
		}
	})
</script>

<style scoped>
	.asset-search-form {
		margin-bottom: 16px;
	}

	.selected-assets-summary {
		margin-top: 20px;
	}

	.selected-assets-list {
		margin-top: 10px;
	}

	.selected-assets-list :deep(.ant-tag) {
		margin-bottom: 8px;
	}

	.asset-table :deep(.ant-table-row:hover) {
		cursor: pointer;
	}
</style>
